const path = require('path');

const {CleanWebpackPlugin} = require('clean-webpack-plugin');

const TerserPlugin = require("terser-webpack-plugin");

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const webpack = require('webpack');

var getHtmlConfig = function(name){
    return {
        template : './src/view/' + name + '.html',
        filename : 'view/' + name + '.html',
        inject   : true, //完成注入
        hash     : true, //文件每修改一次自动生成版本号
        chunks   : ['common' , name],
        minify   : {
            collapseWhitespace : false
        }
    }
}

 var config = {
  entry: {
      'common'       : ['./src/page/common/index.js'],
      'index'        : ['./src/page/index/index.js'],
      'login'        : ['./src/page/login/index.js'],
      'catalog-main' : ['./src/page/catalog-main/index.js']
  },
  output: {
    filename: 'js/[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer : {
      port : 8888,
      contentBase : path.resolve(__dirname,'dist')
  },
  module : {
      rules : [
            {
                test : /\.css$/,
                use: [
                    {
                        loader : MiniCssExtractPlugin.loader,
                        options : {publicPath : "../"}
                    }
                    ,'css-loader'
                ]
            },
            {
                test : /\.(png|svg|jpg|gif)$/,
                use : {
                    loader : 'url-loader',
                    options : {
                        name : 'images/[name].[ext]',
                        limit : 10,
                        esModule : false
                    }
                }
            },
            {
                test : /\.htm$/,
                use  : {
                    loader : 'html-loader',
                    options : {
                        esModule : false,
                        minimize : false
                    }
                }
            }
      ]
  },
  plugins : [
      //new CleanWebpackPlugin(),
      new MiniCssExtractPlugin({
          filename : 'css/[name].css'
      }),
      new HtmlWebpackPlugin(getHtmlConfig('index')),
      new HtmlWebpackPlugin(getHtmlConfig('login')),
      new HtmlWebpackPlugin(getHtmlConfig('catalog-main')),
      new webpack.HotModuleReplacementPlugin() //热替换,把改动直接编译到内存，在内存直接显示，在开发调试之后发布时要重新编译保存到dist中去
  ],
  optimization : {
    minimize: false,
    minimizer: [
      new TerserPlugin({
        extractComments: false,//不将注释提取到单独的文件中
      })
    ],
    splitChunks : {
        cacheGroups: {
            commons : {
                name        : 'util',
                chunks      : 'all',
                minChunks   : 2,
                minSize     : 0
            }
        }
    }
  },
  externals : {
      'jquery' : 'window.jQuery'
  },
  resolve : {
      alias: {
          util          : __dirname + '/src/util',
          page          : __dirname + '/src/page',
          images        : __dirname + '/src/images',
          service       : __dirname + '/src/service',
          node_modules  : __dirname + '/node_modules'
      }
  }
};

module.exports = config;